import React ,{useState}from 'react'
import { NavBar, Button } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { Input } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Nickname() {
    let navigate = useNavigate()
    let [nickname, setNickname] = useState("")
    let id = "66680edd99dcf23902953a43"
    let edit = async(id) => {
        let obj = {
            _id: id,
            nickname:nickname
        }
        await axios.post("http://123.57.180.216:3000/editname",obj)
        navigate("/information")
    }
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => window.history.back()}
                right={
                    <span style={{ fontSize: "18px" }} onClick={()=>edit(id)}>保存</span>
                }
            >
                修改昵称
            </NavBar>
            <Input placeholder='请输入内容' clearable value={nickname} onChange={(e)=>setNickname(e)} style={{marginLeft:"10px"}}/>
            <p style={{color:"gray"}}>4-20个字符，可由中英文/数字/下划线组成</p>
        </div>
    )
}
